To fulfill your request, I have completely refactored the Billboard component. It now respects the design of a professional file browser (no "one-column" mobile view), sits directly on your main background without a popup container, and features the specific columns you requested: **Surgeons**, **Chase List**, **Chosen By**, **Volume**, and **Last Op**.

The table is **fully Arabic**, uses **horizontal scrolling** from right-to-left, and I've simplified the logic to include the "three mini circles" (Avatar Groups) in both the Chase List and Chosen By columns.

### 1. Hardcoded `useUser` Hook (For Testing)

As requested, this provides a fixed ID so the Billboard can identify "You" among the doctors.

```typescript
// hooks/useUser.ts
export const useUser = () => {
  return { 
    user: { 
      id: 'a0eebc99-9c0b-4ef8-bb6d-6bb9bd380a11', // Matches Dr. Ahmed Khaled from seed
      name: 'Dr. Ahmed Khaled' 
    } 
  };
};

```

### 2. The Refactored Billboard Component

This version removes emojis, uses the `browser-grid` styling for a homogeneous look, and forces horizontal scrolling on small screens.

```tsx
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useBillboard } from "../../hooks/useBillboard";
import { BillboardRow, RivalAvatar, PatientAvatar } from "../../hooks/supaptdr/billboard";

// ------------------------------------------------------------------
// Sub-components: Mini Circles (Avatar Groups)
// ------------------------------------------------------------------
const AvatarGroup = ({ items }: { items: (RivalAvatar | PatientAvatar)[] }) => {
  const displayItems = items.slice(0, 3);
  const remainder = Math.max(0, items.length - 3);

  return (
    <div className="flex items-center -space-x-2 flex-row-reverse justify-end">
      {displayItems.map((item, i) => (
        <img 
          key={i} 
          src={item.avatar} 
          alt={item.name}
          className="w-7 h-7 rounded-full border-2 border-white object-cover shadow-sm"
          title={item.name}
        />
      ))}
      {remainder > 0 && (
        <div className="w-7 h-7 rounded-full border-2 border-white bg-slate-100 flex items-center justify-center text-[9px] font-bold text-slate-500 z-0">
          +{remainder}
        </div>
      )}
    </div>
  );
};

const EgoAlertBanner = ({ message }: { message: string }) => (
  <motion.div 
    initial={{ opacity: 0, height: 0 }}
    animate={{ opacity: 1, height: 'auto' }}
    className="w-full bg-red-50/80 border-b border-red-100 px-6 py-2"
  >
    <p className="text-[12px] text-red-800 font-bold text-right">{message}</p>
  </motion.div>
);

// ------------------------------------------------------------------
// Main Component
// ------------------------------------------------------------------
const Billboard = () => {
  const { data: doctors, loading } = useBillboard();

  const columns = [
    { label: "الجراح", width: "25%" },
    { label: "قائمة المنافسين", width: "20%" }, 
    { label: "تم اختياره من قبل", width: "20%" },      
    { label: "حجم العمليات", width: "15%" },
    { label: "آخر عملية", width: "20%" },
  ];

  if (loading) return <div className="p-20 text-center text-white/50">جاري تحميل البيانات...</div>;

  return (
    <div className="w-full h-full p-4 pt-24 overflow-x-auto no-scrollbar" dir="rtl">
      
      <style>{`
        .browser-grid {
          display: grid;
          min-width: 900px; /* Forces horizontal scroll instead of squashing */
          grid-template-columns: 25% 20% 20% 15% 20%;
          align-items: center;
          gap: 0;
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>

      {/* Main Table Body - Transparent/Homogenous with BG */}
      <div className="rounded-xl overflow-hidden border border-white/10 bg-white/10 backdrop-blur-md">
        
        {/* Header */}
        <div className="browser-grid py-4 bg-black/10 border-b border-white/5 px-6">
          {columns.map((col, idx) => (
            <div key={idx} className="text-[11px] font-bold text-white/60 uppercase tracking-wider">
              {col.label}
            </div>
          ))}
        </div>

        {/* List Rows */}
        <div className="divide-y divide-white/5">
          {doctors.map((doc: BillboardRow) => (
            <div key={doc.id} className={`group transition-colors ${doc.isCurrentUser ? 'bg-blue-500/10' : 'hover:bg-white/5'}`}>
              
              {/* Conditional Ego Alert inside the row */}
              <AnimatePresence>
                {doc.isCurrentUser && doc.egoAlert && (
                  <EgoAlertBanner message={doc.egoAlert} />
                )}
              </AnimatePresence>

              <div className="browser-grid px-6 py-4">
                
                {/* 1. Surgeon */}
                <div className="flex items-center gap-3">
                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center font-bold text-xs ${doc.isCurrentUser ? 'bg-blue-500 text-white' : 'bg-white/10 text-white/70'}`}>
                    {doc.rank}
                  </div>
                  <span className={`text-sm font-bold ${doc.isCurrentUser ? 'text-blue-400' : 'text-white/90'}`}>
                    {doc.name}
                  </span>
                </div>

                {/* 2. Chase List (Three Mini Circles) */}
                <div>
                  <AvatarGroup items={doc.sharing} />
                </div>

                {/* 3. Chosen By (Three Mini Circles) */}
                <div>
                   <AvatarGroup items={doc.chosenBy} />
                </div>

                {/* 4. Volume */}
                <div className="flex items-center gap-2">
                  <span className="text-sm font-mono text-white/80">{doc.size}</span>
                  <span className="text-[10px] text-white/40 font-medium">حالة</span>
                </div>

                {/* 5. Last Op */}
                <div className="text-sm text-white/60 font-medium">
                  {new Date(doc.modified).toLocaleDateString('ar-EG', { day: 'numeric', month: 'long' })}
                </div>

              </div>
            </div>
          ))}
        </div>
      </div>

      <p className="mt-6 text-center text-white/30 text-[10px] uppercase tracking-widest">
        مؤشر أداء الجراحين في {doctors[0]?.city || 'المدينة'} • تحديث مباشر
      </p>
    </div>
  );
};

export default Billboard;

```

### Key Changes Explained:

* **Horizontal Scroll:** The `.browser-grid` has a `min-width: 900px`. This prevents the columns from stacking or squashing on mobile. The user simply swipes horizontally to see the "Last Op" and "Volume" columns.
* **Full RTL Arabic:** The entire component uses `dir="rtl"`. Columns are translated, and the layout flows from right to left.
* **Homogenous Design:** Removed the white card background. It now uses `bg-white/10 backdrop-blur-md` and `border-white/10`, allowing it to blend naturally with your main application's background (stars, morning, etc.).
* **Column Update:**
* **قائمة المنافسين (Chase List):** Uses the `AvatarGroup` circles.
* **تم اختياره من قبل (Chosen By):** Now also uses the `AvatarGroup` circles.
* **Surgeon Identity:** Replaced emojis with a clean "Rank Box" that highlights blue if it's the current user.


* **Clean Styles:** Removed the "File Browser" default icons and emoji markers to keep the interface clinical and professional.

Would you like me to adjust the transparency of the rows or change the color mapping for the rank numbers?